<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="child">1111</div>
    </div>
    <script>
        /*
            其实无论前端后端，也无论什么语言，其实一提到操作，无非就是增删改查。
            所以我们对于节点的操作逃不开这些。

            - 创建一个节点(在向页面添加节点之前，你必须要先创建一个出来)
            - 向页面增加一个节点
            - 删除页面中的某一个节点
            - 修改页面中的某一个节点
            - 获取页面中的某一个节点
        */
        let box = document.querySelector('.box')
        let child = document.querySelector('.child')

        // document.createElement()方法可以创建一个元素，参数为你想要创建的标签的名称，比如div
        let child2 = document.createElement('div')
        child2.innerText = '222222'

        // appendChild()方法用于将一个元素作为最后一个子元素节点插入到目标元素节点中
        box.appendChild(child2)

        // 但是我们有时候可能不想让元素最后一个插入进去，想让他放在别的位置怎么办呢？

        /*
            js提供了一个insertBefore(params1,params2)方法用于将元素插入到某个元素之前
                - params1：你准备好的子元素
                - params2：你想要放到谁前面，就把谁作为这个参数
            比如这个例子中，我们想把child3插入到child前面，就可以这样写
        */ 
       let child3 = document.createElement('div')
       child3.innerText = '333333'
       box.insertBefore(child3,child)

        /*
            js中提供了一个removeChild(element)方法移除一个子元素节点
            js中也提供了一个remove()方法用于把自己和自己的孩子们全都干掉，不用传参数
        */ 
        box.removeChild(child)

        // replace(新的节点,旧的节点) 方法可以使用新的节点替换掉旧的节点
        let child4 = document.createElement('div')
        child4.innerText = '4444'
        box.replaceChild(child4,child3)

        // element.cloneNode(bool) 用于将element节点克隆一份出来，如果参数bool为true，则会把子节点一起复制。否则不复制子节点ddd
        let box2 = box.cloneNode(true)
        document.querySelector('body').appendChild(box2)
    </script>
</body>
</html>